﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/Content/js/simditor/css/simditor.css" rel="stylesheet" />
<script src="~/Content/js/ueditor/utf8-net/ueditor.config.js"></script>
<script src="~/Content/js/ueditor/utf8-net/ueditor.all.min.js"></script>
<script src="~/Content/js/simditor/js/module.min.js"></script>
<script src="~/Content/js/simditor/js/hotkeys.min.js"></script>
<script src="~/Content/js/simditor/js/uploader.min.js"></script>
<script src="~/Content/js/simditor/js/simditor.min.js"></script>
<script src="~/Content/js/uploadImage/jquery.ui.widget.min.js"></script>
<script src="~/Content/js/uploadImage/jquery.iframe-transport.min.js"></script>
<script src="~/Content/js/uploadImage/jquery.fileupload.min.js"></script>
<link href="~/Content/js/uploadImage/jquery.fileupload-image.css" rel="stylesheet" />
<script src="~/Content/js/uploadImage/jquery.fileupload-image-extend.js"></script>
<script>
    var keyValue = $.request("keyValue");
    var ue;
    $(function () {
        initControl();
        //富文本编辑
        ue = UE.getEditor('F_Content');
        //editor = new Simditor({
        //    textarea: $('#F_Content'),
        //    toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'],
        //    placeholder: '这里输入内容...',
        //    upload: {
        //        url: '/Common/Upload', //文件上传的接口地址
        //        params: { tableName: "Article" }, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
        //        fileKey: 'upload', //服务器端获取文件数据的参数名
        //        connectionCount: 3,
        //        leaveConfirm: '正在上传文件'
        //    }
        //});
        if (!!keyValue) {
            $.ajax({
                url: "/Article/Article/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#form1").formSerialize(data);

                    ue.ready(function () {
                        ue.setContent(data.F_Content);
                    });

                    $("#F_TitleImage").bindUpload({
                        limitCount: 1,
                        type: "ArticleTitle"
                    });

                    $("#F_TopImage").bindUpload({
                        limitCount: 1,
                        type: "ArticleTop"
                    });

                    $("#F_IsTop").change();

                }
            });
        } else {
            $("#F_TitleImage").bindUpload({
                limitCount: 1,
                type: "ArticleTitle"
            });

            $("#F_TopImage").bindUpload({
                limitCount: 1,
                type: "ArticleTop"
            });

        }
        //获取标签
        $.ajax({
            url: "/Article/Article/GetTagAllJson",
            data: { keyValue: keyValue },
            dataType: "json",
            async: false,
            success: function (data) {
                var $cbTagBox = $("#cbTagBox");
                //console.log(JSON.stringify(data));
                for (var i = 0; i < data.length; i++) {
                    var ck = data[i].F_Select ? "checked='checked'" : "";
                    var cbHtml = "<div class='ckbox'>" +
                        "<input id='F_Tag" + i + "' name='F_Tag' type='checkbox' value='" + data[i].F_TagId + "' " + ck + " >" +
                        "<label for='F_Tag" + i + "'>" + data[i].F_Name + "</label>" +
                        "</div>";
                    $cbTagBox.append(cbHtml);
                }
            }
        });
        
    });
    function initControl() {

        $("#F_IsTop").change(function () {
            var v = $("#F_IsTop").val();
            if (v == "true") {
                $("#trTopImage").show();
                $("#trTopOrder").show();
            } else {
                $("#trTopImage").hide();
                $("#trTopOrder").hide();
            }
        });

        $("#F_Type").bindSelect({
            url: "/Article/Article/GetArticleTypes",
        });
    }
    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        var tagIds = "";
        $("input[name='F_Tag']:checked").each(function () {
            tagIds += $(this).val() + ",";
        });
        $("#F_TagIds").val(tagIds);
        var postData = $("#form1").formSerialize();
        postData["F_Content"] = ue.getContent();
        $.submitForm({
            url: "/Article/Article/SubmitForm?keyValue=" + keyValue,
            param: postData,
            success: function () {
                $.currentWindow().$("#gridList").trigger("reloadGrid");
            }
        });
    }
</script>

<form id="form1">
    <div style="padding-top: 20px; margin-right: 20px;">
        <table class="form">
            <tr>
                <th class="formTitle">文章类别</th>
                <td class="formValue">
                    <input id="F_ClickNumber" name="F_ClickNumber" type="hidden" />
                    <input id="F_CommentNumber" name="F_CommentNumber" type="hidden" />
                    <select id="F_Type" name="F_Type" class="form-control required">
                    </select>
                </td>
            </tr>
            <tr>
                <th class="formTitle">标题</th>
                <td class="formValue">
                    <input id="F_Title" name="F_Title" type="text" class="form-control required" placeholder="" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">是否置顶</th>
                <td class="formValue">
                    <select id="F_IsTop" name="F_IsTop" class="form-control required">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                </td>
            </tr>
            <tr id="trTopOrder">
                <th class="formTitle">置顶文章排序</th>
                <td class="formValue">
                    <input id="F_Order" name="F_Order" type="text" class="form-control" placeholder="" />
                </td>
            </tr>
            <tr id="trTopImage" style="display: none;">
                <th class="formTitle">置顶图片</th>
                <td class="formValue">
                    <div>
                        <input id="F_TopImage" name="F_TopImage" type="text" class="form-control required" placeholder="" />
                    </div>
                    <span id="imgTip" style="color: red;">图片尺寸建议为 500 x 250</span>
                </td>
            </tr>
            <tr>
                <th class="formTitle">可否评论</th>
                <td class="formValue">
                    <select id="F_CanComment" name="F_CanComment" class="form-control required">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th class="formTitle">发布状态</th>
                <td class="formValue">
                    <select id="F_State" name="F_State" class="form-control required">
                        <option value="0">未发布</option>
                        <option value="1">已发布</option>
                        <option value="2">失效</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th class="formTitle">标签</th>
                <td id="cbTagBox" class="formValue">
                    <input type="hidden" id="F_TagIds" name="F_TagIds" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">标题图片</th>
                <td class="formValue">
                    <div>
                        <input id="F_TitleImage" name="F_TitleImage" type="text" class="form-control required" placeholder="" />
                    </div>
                    <span id="imgTip" style="color: red;">图片尺寸建议为 60 x 60</span>
                </td>
            </tr>
            <tr>
                <th class="formTitle">内容</th>
                <td class="formValue">
                    @*<textarea id="F_Content" name="F_Content" type="text" class="form-control required" height="50px" placeholder=""></textarea>*@
                    @*<textarea id="F_Content" name="F_Content" class="form-control" rows="5"></textarea>*@
                    <script id="F_Content" name="F_Content" type="text/plain">
                    </script>
                </td>
            </tr>
        </table>
    </div>
</form>
